<script setup lang="ts">
import { useRouter } from 'vue-router';
import {
  Iphone,
  Message,
  User,
  Calendar
} from '@element-plus/icons-vue';

const router = useRouter();
const goBack = () => {
  router.go(-1);
};
const circleUrl = 'https://cube.elemecdn.com/6/94/4d3ea63c03f48a06468bc1b7b8a48jpeg.jpeg';
</script>

<template>
  <div class="user-detail">
    <el-page-header title="返回" @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> 用户详情 </span>
      </template>
    </el-page-header>
    <div class="user-detail-content">
      <div class="user-detail-avatar">
        <el-avatar :size="100" :src="circleUrl" />
        <div class="user-detail-info">
          <div class="user-detail-name">xxx用户名</div>
          <div class="user-detail-id">id：0000001</div>
        </div>
      </div>
      <div class="single-container" style="margin-top: 30px;">
        <div class="single">
          <div class="single-title">
            <el-icon :size="16"><Iphone /></el-icon>
            <span class="single-title-text">注册手机号</span>
          </div>
          <div class="single-content">
            <div class="single-content-left">
              +33
            </div>
            <input disabled class="single-content-input" type="text" placeholder="123">
            <img class="single-content-right" src="@/assets/commons/flag_PM.png" alt="">
          </div>
        </div>
        <div class="single">
          <div class="single-title">
            <el-icon :size="16"><Message /></el-icon>
            <span class="single-title-text">注册邮箱</span>
          </div>
          <div class="single-content">
            <!-- <input disabled class="single-content-input2" style="color: #FD7401;" type="text" placeholder="123"> -->
            <div class="single-content-input2">
              123
            </div>
          </div>
        </div>
        <div class="single">
          <div class="single-title">
            <el-icon :size="16"><User /></el-icon>
            <span class="single-title-text">用户名称</span>
          </div>
          <div class="single-content">
            <div class="single-content-input2">
              123
            </div>
          </div>
        </div>
        <div class="single">
          <div class="single-title">
            <el-icon :size="16"><Calendar /></el-icon>
            <span class="single-title-text">注册时间</span>
          </div>
          <div class="single-content">
            <div class="single-content-input2">
              123
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .user-detail {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
  }
  .user-detail-content {
    margin-top: 20px;
  }
  .user-detail-avatar {
    display: flex;
  }
  .user-detail-info {
    margin-left: 18px;
  }
  .user-detail-name {
    
    font-size: 20px;
    color: #384D6C;
    font-weight: bold;
    margin-top: 10px;
  }
  .user-detail-id {
    color: #384D6C;
    font-size: 20px;
    margin-top: 10px;
  }
  .single-container {
    display: flex;
    flex-wrap: wrap;
  }
  .single {
    margin-bottom: 15px;
    margin-right: 90px;
  }
  .single-title {
    display: flex;
    align-items: center;
    color: #4F507F;
    font-size: 14px;
  }
  .single-title-text {
    margin-left: 15px;
  }
  .single-content {
    width: 370px;
    height: 45px;
    border-radius: 5px;
    background: #E7E9EB;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .single-content-left {
    width: 40px;
    height: 20px;
    border-right: 1px solid #C0C4CC;
  }
  .single-content-input {
    width: 270px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 14px;
  }
  .single-content-input2 {
    width: 350px;
    height: 40px;
    box-sizing: border-box;
    font-size: 14px;
    color: #FD7401;
    display: flex;
    align-items: center;
  }
  .single-content-right {
    width: 30px;
    height: 23px;
  }
</style>